.page-columnのgrid layoutを調整できるようにするUserCSS

code:style.css

.page-column {

grid-template-columns: var(--page-column-columns, 46px minmax(200px, 960px) min-content);

grid-template-areas: var(--page-column-areas, "spacer page menu");

}

@media(991px < width) {

.page-column:has(.page-sidebar) {

grid-template-columns: var(--page-column-columns-sidebar, minmax(200px, 3fr) minmax(170px, 1fr) min-content);

grid-template-areas: var(--page-column-areas-sidebar, "page sidebar menu");

}

}

@media(min-width: 768px) and (max-width: 991px) {

.page-column {

grid-template-columns: var(--page-column-columns-768, minmax(200px, 960px) min-content);

grid-template-areas: var(--page-column-areas-768, "page menu");

}

}

@media(max-width: 767px) {

.page-column {

display: grid;

grid-template-columns: var(--page-column-columns-767, 1fr);

grid-template-areas: var(--page-column-areas-767, "page");

}

}